<!--
 * 预售活动时的查看活动记录的弹框
-->

<template>
  <el-dialog
    title="活动修改记录"
    :visible.sync="_show"
    width="70%"
    @open="search()"
  >
    <el-form :inline="true" :model="formRecord">
      <el-form-item label="登录账号">
        <el-input v-model="formRecord.loginAccount" />
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="formRecord.createTimeRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search()"
        >查询
      </el-button>
      <el-button
        @click="exportExcel"
        style="margin-top: 0px"
        type="success"
        icon="el-icon-s-data"
        :loading="exportLoading"
      >
        导出
      </el-button>
    </el-form>

    <el-table
      :data="list"
      border
      height="360"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="活动编号" prop="activityCode" />
      <el-table-column label="活动名称" prop="activityName" />
      <el-table-column label="修改前内容" prop="originalValue" />
      <el-table-column label="修改后内容" prop="editValue" />
      <el-table-column label="登录账号" prop="loginAccount" />
      <el-table-column label="操作IP" prop="operateIp" />
      <el-table-column label="操作时间" prop="operateTime" />
    </el-table>

    <div class="block" style="margin-top: 5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="_show = false" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  queryActivityModificationRecord,
  exportActivityModificationRecord,
} from "@/api/preSaleActivity";
export default {
  model: {
    prop: "show",
    event: "update:show",
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    recordActivityCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formRecord: {
        loginAccount: "",
        createTimeRange: [],
      },

      listQuery: {
        current: 1,
        size: 20,
      },

      total: 0,

      list: [],

      exportLoading: false,
    };
  },

  computed: {
    _show: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },

  methods: {
    search() {
      this.listQuery.current = 1;

      queryActivityModificationRecord({
        condition: {
          activityCode: this.recordActivityCode,
          ...this.formRecord,
          operateBeginTime: this.formRecord.createTimeRange[0],
          operateEndTime: this.formRecord.createTimeRange[1],
        },
        ...this.listQuery,
      }).then((res) => {
        if (res.code == 1) {
          this.list = res.records;
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
        }
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.listQuery.current = 1;
      this.search();
    },

    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },

    exportExcel() {
      exportActivityModificationRecord({
        activityCode: this.recordActivityCode,
      })
        .then((res) => {
          const link = document.createElement("a");
          let blob = new Blob([res], {
            type: "application/vnd.ms-excel",
          });
          link.style.display = "none";
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = "活动修改记录.xlsx";
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>